<style lang="less" scoped>
.panel {
  margin-bottom: 10px;
  &-title {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 0.1px solid #eaeaea;
    background: white;
    font-size: 14px;

    &__label {
      display: flex;
      align-items: center;
    }
    &__value {
      flex: 1;
      // font-size: 16px;
      align-items: center;
    }
  }
  &-content {
    margin-bottom: 10px;
    background: white;
    padding-bottom: 10px;

    &__item {
      display: flex;
      padding: 10px 10px 0 10px;
      font-size: 14px;
      &-label {
        color: #666;
      }
      &-value {
        flex: 1;
        padding-left: 15px;
        color: #333;
      }
    }
  }
}
.logImg {
  width: 30px;
  height: 30px;
}
</style>

<template>
  <div>
    <load v-if="loading"></load>
    <div v-else>
      <div class="panel">
        <!-- title -->
        <div class="panel-title">
          <div class="panel-title__label">
            <image class="logImg" :src="item.LogoUrl" />
          </div>
          <div class="panel-title__value">{{item.ProductName||'-'}}</div>
          <div class="panel-title__right"></div>
        </div>
        <!-- content -->
        <div class="panel-content">
          <div class="panel-content__item">
            <div class="panel-content__item-label"></div>
            <div class="panel-content__item-value">
              {{item.LastRound||'-'}} {{item.PublishDate||'-'}} {{item.Location||'-'}}
            </div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label"></div>
            <div class="panel-content__item-value">
              <tags :items="item.Tags||'-'"></tags>
            </div>
            <div class="panel-content__item-right"></div>
          </div>
        </div>

        <!-- title -->
        <div class="panel-title">
          <div class="panel-title__label">公司介绍</div>
          <div class="panel-title__value"></div>
          <div class="panel-title__right">更多</div>
        </div>
        <!-- content -->
        <div class="panel-content">
          <div class="panel-content__item">
            <div class="panel-content__item-label">公司简介</div>
            <div class="panel-content__item-value">{{item.CompanyIntro||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">公司名称</div>
            <div class="panel-content__item-value">{{item.CompanyName||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">法定代表</div>
            <div class="panel-content__item-value">{{item.OperName||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">注册时间</div>
            <div class="panel-content__item-value">{{item.StartDate||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
        </div>

        <van-tabs :active="active" animated swipeable>
          <van-tab title="融资历程">
            <rongzi :items="item.FunderInfo||[]"></rongzi>
          </van-tab>
          <van-tab title="核心人员">
            <renyuan :items="item.MemberInfo||[]"></renyuan>
          </van-tab>
          <van-tab title="主要产品">
            <chanpin :items="item.ProductInfo||[]"></chanpin>
          </van-tab>
          <van-tab title="相关新闻">
            <xinwen :items="item.NewsInfo||[]"></xinwen>
          </van-tab>
          <van-tab title="竞品推荐">
            <jingpin :items="item.CompatProductInfo||[]"></jingpin>
          </van-tab>
        </van-tabs>

      </div>
    </div>
  </div>
</template>
<script>
import Tags from './tags';
import Rongzi from './rongzi';
import Renyuan from './renyuan';
import Chanpin from './chanpin';
import Xinwen from './xinwen';
import Jingpin from './jingpin';
import Load from '@/components/load';

export default {
  computed: {
    loading() {
      return this.$store.getters.loading;
    }
  },
  components: { Tags, Rongzi, Renyuan, Chanpin, Xinwen, Jingpin, Load },
  data() {
    return {
      item: {},
      active: 0
    };
  },
  onShow() {
    this.getInfos();
  },
  methods: {
    async getInfos() {
      const url = '/app/getProductDetail';
      const params = {
        productId: this.$route.query.id
      };
      const res = await this.$http.get(url, params);
      if (res.status != 200) {
        wx.showToast({
          title: res.message || '获取失败！',
          icon: 'none',
          mask: true
        });
        return;
      }
      this.item = res.result;
    }
  }
};
</script>
